<template>
  <div>
    <i-cell-group>
      <i-cell
        v-for="(item,index) in readyList"
        :key="index"
        :title="item.goodsTypeName"
        :value="item.sort"
        is-link
        @click="goodsTypeClick(item)"
      ></i-cell>
    </i-cell-group>

    <div class="kong"></div>
    <div class="navClick" @click="putawayClick">
      <p>新建分类</p>
    </div>
    <div class="box" v-if="isShow">
      <div class="zz"></div>
      <div class="showCode">
        <input type="text" v-model="newShopName" placeholder="请输入类型名称（建议4个字）" />
        <div>
          <button @click="isShow=false">取消</button>
          <button class="ok" @click="handleClick">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_GOODS_TYPE_LIST_API,
  ADD_SHOP_GOODS_TYPE,
  FIND_SHOP_GOODS_PAGE
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [],
      readyList: [],
      isShow: false,
      newShopName: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
    // list () {
    //   return this.readyList.map(_ => ({
    //     goodsTypeName: _.goodsTypeName,
    //     goodsNum: _.goodsNum
    //   }))
    // }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
  },
  methods: {
    init () {
      this.list = []
      this.findDynaicInfoList()
    },
    goodsTypeClick (item) {
      const vm = this
      vm.$router.push(
        `/pages/shop-management/goods-management/index/main?goodsTypeId=${
          item.goodsTypeId
        }`
      )
    },
    putawayClick () {
      const vm = this
      vm.isShow = true
    },
    handleClick () {
      const vm = this
      if (!vm.newShopName) {
        vm.$toast('请输入类型名称')
        return false
      }
      vm.addType()
    },
    findDynaicInfoList () {
      const vm = this
      FIND_GOODS_TYPE_LIST_API(vm.account.shopId, 0)
        .then(r => {
          if (r.data.code === '0') {
            vm.readyList = r.data.data
            vm.readyList.forEach(_ => {
              vm.getShopNum(_.goodsTypeId)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getShopNum (goodsTypeId) {
      const vm = this
      let params = {
        shopId: vm.$store.state.account.shopId,
        isShelf: '1',
        goodsTypeId: goodsTypeId
      }
      FIND_SHOP_GOODS_PAGE(params, 1, 10)
        .then(r => {
          if (r.data.code === '0') {
            vm.readyList.forEach(_ => {
              if (goodsTypeId === _.goodsTypeId) {
                // sort
                _.sort = `${r.data.data.total}件商品`
              }
            })
            vm.list = vm.readyList
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    addType () {
      const vm = this
      let params = {
        goodsTypeName: vm.newShopName,
        shopId: vm.account.shopId,
        sort: 0
      }
      ADD_SHOP_GOODS_TYPE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('新增类型成功', '').then(() => {
              vm.isShow = false
              vm.newShopName = ''
              vm.findDynaicInfoList()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.kong {
  height: 35px;
}
.navClick {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 45px;
  border-radius: 25px;
  background: #e8e8e8;
  color: #000;
  display: flex;
  justify-content: center;
  p {
    width: 33.33%;
    font-size: 13px;
    text-align: center;
    line-height: 45px;
  }
}
.box {
  .zz {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
  .showCode {
    width: 320px;
    height: 130px;
    border: 2px solid #eee;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow: auto;
    padding: 15px 0;
    input {
      width: 90%;
      height: 35px;
      margin: auto;
      border-radius: 4px;
      border: 1px solid #d6d6d6;
      font-size: 14px;
      padding-left: 10px;
    }
    div {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        width: 100px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
      }
      .ok {
        background: $blue;
        color: #fff;
      }
    }
  }
}
</style>
